<template>
  <div class="app-container" id='Order'>
    <div class="filter-container" style="float: right;">
      <el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;" placeholder="请输入用户Id">
      </el-input>
      <el-input v-model="listQuery.orderSn" clearable class="filter-item" style="width: 200px;" placeholder="请输入订单编号">
      </el-input>
      <el-select v-model="arrayTemp" multiple style="width: 200px;" class="filter-item" placeholder="请选择订单状态">
           <el-option v-for="(key,value) in statusMap"  :key="key" :label="key" :value="value"></el-option>
      </el-select>
      <el-button type="primary" class="filter-item" icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" border fit highlight-current-row>
      <el-table-column prop="orderSn" align="center" label="订单编号" sortable width="150">
      </el-table-column>
      <el-table-column prop="userId" align="center" label="用户Id" width="180">
      </el-table-column>
      <el-table-column prop="orderStatus" align="center" label="订单状态">
        <template slot-scope="scope">
            <el-tag>{{scope.row.orderStatus | orderStatusFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单金额" prop="orderPrice">
      </el-table-column>
      <el-table-column  align="center" label="支付金额" prop="atualPrice">
      </el-table-column>
      <el-table-column  align="center" label="支付时间" prop="payTime">
      </el-table-column>
      <el-table-column  align="center" label="物流单号" prop="shipSn">
      </el-table-column>
      <el-table-column  align="center" label="物流渠道" prop="shipChannel">
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleDetail(scope.row)" type="primary" size="small">详情</el-button>
          <el-button v-if="scope.row.orderStatus == 201" @click="handleShip(scope.row)" type="primary" size="small">发货</el-button>
          <el-button v-if="scope.row.orderStatus == 202" @click="handleRefund(scope.row)" type="primary" size="small">退款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
    <el-dialog title="订单详情" :visible.sync="orderDialogVisible">
      <el-form  :data="orderDetail" label-position="left">
          <el-form-item label="订单编号：">
             <span>{{orderDetail.order.orderSn}}</span>
          </el-form-item>
          <el-form-item label="订单状态：">
              <span>{{orderDetail.order.orderStatus | orderStatusFilter}}</span>
           </el-form-item>
           <el-form-item label="订单用户：">
              <span>{{orderDetail.user.nickname}}</span>
           </el-form-item>
           <el-form-item label="用户留言：">
              <span>{{orderDetail.order.message}}</span>
           </el-form-item>
           <el-form-item label="收货信息：">
              <span>（收货人）{{orderDetail.order.consignee}}</span>
              <span>（手机号）{{orderDetail.order.mobile}}</span>
              <span>（地址）{{orderDetail.order.address}}</span>
           </el-form-item>
           <el-form-item label="商品信息：">
              <el-table :data="orderDetail.orderGoods" border fit highlight-current-row>
                  <el-table-column align="center" label="商品名称" prop="goodsName" />
                  <el-table-column align="center" label="商品编号" prop="goodsSn" />
                  <el-table-column align="center" label="货品规格" prop="specifications" />
                  <el-table-column align="center" label="货品价格" prop="price" />
                  <el-table-column align="center" label="货品数量" prop="number" />
                  <el-table-column align="center" label="货品图片" prop="picUrl">
                      <template slot-scope="scope">
                      <img :src="scope.row.picUrl" width="40">
                      </template>
                  </el-table-column>
              </el-table>
           </el-form-item>
           <el-form-item label="费用信息：">
              <span>(实际费用){{orderDetail.order.actualPrice}}元=</span>
              <span>(商品总价){{orderDetail.order.goodsPrice}}元+</span>
              <span>(快递费用){{orderDetail.order.freightPrice}}元-</span>
              <span>(优惠减免){{orderDetail.order.couponPrice}}元-</span>
              <span>(积分减免){{orderDetail.order.integralPrice}}元</span>
           </el-form-item>
           <el-form-item label="支付信息：">
              <span>（支付渠道）微信支付</span>
              <span>（支付时间）{{orderDetail.order.payTime}}</span>
           </el-form-item>
           <el-form-item label="快递信息：">
              <span>（快递公司）{{orderDetail.order.shipChannel}}</span>
              <span>（快递单号）{{orderDetail.order.shipSn}}</span>
              <span>（发货时间）{{orderDetail.order.shipTime}}</span>
           </el-form-item>
           <el-form-item label="收货信息：">
              <span>（确定收货时间）{{orderDetail.order.confirmTime}}</span>
           </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="发货" :visible.sync="shipDialogVisible">
      <el-form ref="shipForm"  :model="shipForm"  label-width="100px" size="mini" style="width: 400px;margin-left: 20px;">
        <el-form-item label="快递公司" prop="shipChannel">
          <el-input v-model="shipForm.shipChannel"></el-input>
        </el-form-item>
        <el-form-item label="快递编号" prop="shipSn">
          <el-input v-model="shipForm.shipSn"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shipDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmShip">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="退款" :visible.sync="refundDialogVisible">
      <el-form ref="refundForm"  :model="refundForm"  label-width="100px" size="mini" style="width: 400px;margin-left: 20px;">
        <el-form-item label="退款金额" prop="refundMoney">
          <el-input v-model="refundForm.refundMoney" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="refundDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmRefund">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination'
  import {
    listOrder,
    detailOrder,
    shipOrder,
    refundOrder,
  } from '@/api/malls/order'
  const statusMap = {
      101: '未付款',
      102: '用户取消',
      103: '系统取消',
      201: '已付款',
      202: '申请退款',
      203: '已退款',
      301: '已发货',
      401: '用户收货',
      402: '系统收货'
  }
  export default {
    name: 'Order',
    components: {
      Pagination
    },
    filters: {
      orderStatusFilter(status){
         return statusMap[status];
      }
    },
    data() {
      return {
        //订单状态Map
        statusMap,
        //查询数据
        listQuery: {
          page: 1,
          limit: 10,
          userId: '',
          orderSn: '',
          orderStatusArray: ''
        },
        //筛选的临时变量
        arrayTemp: [],
        //总条数
        total: 0,
        //表格数据
        tableData: [],
        //打开订单详情模态框
        orderDialogVisible: false,
        //订单详情数据
        orderDetail: {
            order: {},
            user: {},
            orderGoods: []
        },
        //发货状态模态框
        shipDialogVisible: false,
        //发货表单数据
        shipForm: {
          orderId: '',
          shipChannel: '',
          shipSn: '',
        },
        //退款模态框
        refundDialogVisible: false,
        //退款表单数据
        refundForm: {
          orderId: '',
          refundMoney: ''
        }
      }
    },
    created() {
      // 数据初始化
      this.getList();
    },
    methods: {
      //查询列表
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      //获取列表数据接口
      getList() {
      this.listQuery.orderStatusArray = this.arrayTemp.toString();
        listOrder(this.listQuery).then(res => {
          this.tableData = [];
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        })
      },
      //打开详情模态框
      handleDetail(row) {
        // this.dataForm = Object.assign({}, row);
        //查询订单详情
        detailOrder(row.id).then(res => {
            console.log(res);
            this.orderDetail = res.data.data;
        })
        this.orderDialogVisible = true;
      },
      //重置发货表单数据
      resetForm(){
        this.shipForm = {
          orderId: '',
          shipChannel: '',
          shipSn: '',
        }
      },
      //打开发货模态框
      handleShip(row) {
          this.shipForm.orderId = row.id
          this.shipForm.shipChannel = row.shipChannel
          this.shipForm.shipSn = row.shipSn
          this.shipDialogVisible = true;
          this.$nextTick(() => {
              this.refs['shipForm'].clearValidate();
          })
      },
      //确定发货
      confirmShip() {
        this.$refs['shipForm'].validate(valid => {
          if(valid){
             shipOrder(this.shipForm).then(res => {
              this.shipDialogVisible = false;
              this.getList();
              this.$notify.success({
                title: '成功',
                message: '发货成功'
              });
            })
          }
        })
      },
      //打开退款模态框
      handleRefund(row) {
          this.refundForm.orderId = row.id
          this.refundForm.refundMoney = row.actualPrice
          this.refundDialogVisible = true;
          this.$nextTick(() => {
              this.refs['refundForm'].clearValidate();
          })
      },
      //确定退款
      confirmRefund() {
        this.$refs['refundForm'].validate(valid => {
          if(valid){
              refundOrder(this.refundForm).then(res => {
              this.refundDialogVisible = false;
              this.getList();
              this.$notify.success({
                title: '成功',
                message: '退款成功'
              });
            })
          }
        })
      },
    }
  }

</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
<style scoped>
</style>